{include file="common/header-top" /}

<style>
    .van-grid-item__text{
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .job-item{
        display: block;
        margin-top: 5px;
    }

    .job-item-a{
        color: #2f2d33;
    }

    .job-item .job-item-img-icon {
        margin-top: 28px;
        padding-left: 10px;
    }

    .job-item .job-item-title{
        margin: 8px 0px 5px 2px;
        color: #3c3c3c;
        text-overflow: ellipsis;
        font-size: 15px;
        font-weight: 600;
        -webkit-line-clamp: 2;
    }
    .job-item .job-item-icon{
        font-size: small;
    }
    .job-item .job-item-span{
        color: #949595;
        font-weight: 500;
        font-size: 12px;
        padding-left: 5px;
    }
    .job-item .job-item-span-unit{
        font-size: 14px;
        color: #fcc48d;
    }

    .job-item .job-item-money-div{
        margin-top: 45px;
        float: right;
        margin-right: 5px;
    }


    .job-item .van-cell{
        padding: 0;
    }

    .job-item .van-cell:not(:last-child)::after{
        border-bottom: 0;
    }


</style>


<div id='app' v-cloak>

    <van-nav-bar title="招聘记录" left-arrow @click-left="goBack" left-text="返回">
    </van-nav-bar>


    <van-tabs v-model="currentTab" swipeable @click="changeTab">
        <van-tab title="全部" name="-1"></van-tab>
        <van-tab title="审核中" name="1"></van-tab>
        <van-tab title="招聘中" name="2"></van-tab>
        <van-tab title="工作中" name="4"></van-tab>
        <van-tab title="已完成" name="5"></van-tab>
        <van-tab title="草稿箱" name="0"></van-tab>
    </van-tabs>

    <van-row>
        <!--岗位列表-->
        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="getPublishJobList"
        >
            <van-row v-for="item in listJob" class="job-item">
                <a :href="'/index/Jobs/jobDetail?id=' + item.id" class="job-item-a" v-if="!item.is_deleted">
                    <van-col span="5">
                        <van-icon :name="item.jobTypeImg" class="job-item-img-icon" size="45px"></van-icon>
                    </van-col>

                    <van-col span="19">
                        <van-col span="24">
                            <h4 class="job-item-title" style="display: inline-block">
                                <div class="van-ellipsis">{{item.title}}</div>
                            </h4>
                            <van-tag type="success" plain style="float: right; margin-right: 5%;">
                                {{item.statusCh}}
                            </van-tag>
                        </van-col>
                        <van-row>
                            <van-col span="16">
                                <van-cell
                                        icon="/__FRONT__/images/icon/publish-job-address.png"
                                        :title="item.address"
                                >
                                </van-cell>
                                <van-cell
                                        icon="/__FRONT__/images/icon/publish-job-time.png"
                                        :title="item.work_timeCh"
                                ></van-cell>
                                <van-cell
                                        icon="/__FRONT__/images/icon/publish-job-money.png"
                                >
                                        <span class="job-item-span" slot="title">
                                            <span class="money-font">{{item.salary}}</span>{{item.salary_unitCh}}
                                        </span>
                                </van-cell>
                            </van-col>
                            <van-col span="8" style="text-align: right;">
                                <van-button @click.stop.prevent="editJob(item)" type="primary" size="small" v-if="canEdit(item)">编辑</van-button>
                                <van-button @click.stop.prevent="delJob(item)" type="danger" size="small" v-if="canDel(item)">删除</van-button>
                                <van-button @click.stop.prevent="closeApply(item)" color="#fc4049" size="small" v-if="item.isCloseApply">结束招聘</van-button>
                                <van-button @click.stop.prevent="goApplyUser(item)" type="info" size="small" v-if="item.isCloseApply">审核报名</van-button>
                                <van-button @click.stop.prevent="doneJob(item)" color="#e6dc6c" size="small" v-if="item.isDone">完成结算</van-button>

                                <van-button @click.stop.prevent="showTopJob(item)" color="#1fb922" size="small" v-if="item.isTop">置顶兼职</van-button>
                            </van-col>
                        </van-row>
                    </van-col>

                    <van-col span="24">
                        <van-divider style="margin: 3px 0;"></van-divider>
                    </van-col>
                </a>
            </van-row>


        </van-list>
        <!--岗位列表-->
    </van-row>


    <!--错误信息弹窗-->
    <van-popup
            v-model="topJob.showPop"
            get-container="#app"
            position="center"
            style="width: 100%;"
            round
    >
        <van-row>
            <van-col span="24" style="text-align: center;">
                <span>您确定置顶该兼职吗？</span>
            </van-col>
            <van-col span="24" style="text-align: center;">
                <span style="display: block;padding-top: 20px;padding-bottom: 20px;">
                    您将花费 <strong style="color: #cc0000;">{{topJob.topBean}} </strong> 个汇豆置顶该条兼职信息！
                </span>
            </van-col>
            <van-divider></van-divider>
            <van-col span="24" style="padding-bottom: 10px">
                <van-button
                        type="warning"
                        style="float: left; margin-left: 20px;"
                        size="small"
                        @click="topJob.showPop = false"
                >取消</van-button>
                <van-button
                        type="primary"
                        style="float: right; margin-right: 20px;"
                        size="small"
                        @click="setTopJob"
                >确定</van-button>
            </van-col>
        </van-row>
        </van-cell-group>
    </van-popup>
    <!--错误信息弹窗-->



    {include file="common/foot-bar" /}

</div>


<script>

    Vue.use(vant.Lazyload);

    var vm = new Vue({
        el: '#app',
        data() {
            return {
                active:3,
                userCenterIcon: {
                    normal: '/__FRONT__/images/icon/usercenter-n.png',
                    active: '/__FRONT__/images/icon/usercenter-a.png'
                },
                erShouIcon: {
                    normal: '/__FRONT__/images/icon/ershou-n.png',
                    active: '/__FRONT__/images/icon/ershou-a.png'
                },


                //当前列表类型
                currentType: '{$type}',
                currentTab: '{$type}',
                page: 1,
                pageSize: 8,


                //兼职列表集
                listJob: [],
                loading: false,
                finished: false,

                //置顶兼职
                topJob:{
                    showPop: false,
                    jobId: 0,
                    topBean: 2,
                }


            };
        },
        created(){
        },

        computed:{

            //判断能否置顶
            canTop(item){
                if (item.is_top == 0 && item.isCloseApply) {
                    return true;
                }
                return false;
            },
        },

        methods:{
            //返回上一页
            goBack(){
                history.back();
            },
            //判断能否删除
            canDel(item){
                if (item.status == 0 || item.status == 3) {
                    return true;
                }
                return false;
            },
            //判断能否编辑
            canEdit(item){
                if (item.status == 0 || item.status == 3) {
                    return true;
                }
                return false;
            },

            /**==========兼职操作============*/
            //编辑兼职
            editJob(item){
                window.location.href = '/index/Jobs/addJob?jobId=' + item.id;
            },
            //删除兼职
            delJob(item){
                var params = {
                    id: item.id,
                };
                axiosRequest.post('/api/user/delJob', params).then(function (response) {
                    if (response.code == 200) {
                        vm.$data.listJob.forEach(function (one, index) {
                            if (one.id == response.data.jobId) {
                                one.is_deleted = 1;
                            }
                        });
                        vant.Toast('操作成功！');
                    } else {
                        vant.Toast('系统开小差啦！');
                    }
                });
            },
            //结束招聘
            closeApply(item){
                var postData = {
                    id: item.id,
                };
                axiosRequest.post('/api/user/closeApply', postData).then(function (response) {
                    if (response.code == 200) {
                        vm.$data.listJob.forEach(function (one, index) {
                            if (one.id == response.data.jobId) {
                                one.isCloseApply = false;
                            }
                        });
                        vant.Toast('操作成功！');
                    } else {
                        vant.Toast('系统开小差啦！');
                    }
                });
            },
            //审核报名人员
            goApplyUser(item){
                window.location.href = '/index/jobs/applyUserList?jobId=' + item.id;
            },
            //完成工作，结算
            doneJob(item){
                var postData = {
                    id: item.id,
                };
                axiosRequest.post('/api/user/doneJob', postData).then(function (response) {
                    if (response.code == 200) {
                        vm.$data.listJob.forEach(function (one, index) {
                            if (one.id == response.data.jobId) {
                                one.isDone = false;
                            }
                        });
                        vant.Toast('操作成功！');
                    } else {
                        vant.Toast('系统开小差啦！');
                    }
                });
            },


            //显示置顶兼职弹窗
            showTopJob(item){
                this.topJob.jobId = item.id;
                //获取置顶兼职需要的发布豆
                axiosRequest.get('/api/job/getTopJobNeedBean', {params:{jobId:item.id}}).then(function (response) {
                    if (response.code == 200) {
                        vm.$data.topJob.topBean = response.data.job_top;
                        vm.$data.topJob.showPop = true;
                    } else {
                        vant.Toast(response.msg);
                    }
                });
            },

            //置顶兼职
            setTopJob(){
                var postData = {
                    id: this.topJob.jobId,
                };
                axiosRequest.post('/api/user/topJob', postData).then(function (response) {
                    if (response.code == 200) {
                        vm.$data.listJob.forEach(function (one, index) {
                            if (one.id == response.data.jobId) {
                                one.is_top = 1;
                                one.isTop = false;
                            }
                        });
                        vm.$data.topJob.showPop = false;
                        vant.Toast('置顶成功！');
                    } else {
                        vant.Toast('系统开小差啦！');
                    }
                });
            },

            /**==========兼职操作============*/




            //切换tab
            changeTab(name, title){
                this.currentType = name;
                this.listJob = [];
                this.page = 1;
                this.pageSize = 8;
                this.loading = true;
                this.finished = false;
                this.getPublishJobList();
            },
            //获取我发布的兼职
            getPublishJobList(){
                var params = {
                    type: this.currentType,
                    page: this.page,
                    pageSize: this.pageSize
                };
                axiosRequest.get('/api/user/myPublishJob', {params:params}).then(function (response) {
                    if (response.code == 200) {
                        if (response.data) {
                            response.data.forEach(function (item) {
                                vm.$data.listJob.push(item);
                            });
                            vm.$data.loading = false;
                            vm.$data.page += 1;

                            if (response.data.length < vm.$data.pageSize) {
                                vm.$data.finished = true;
                                vm.$data.loading = false;
                            }
                        } else {
                            vant.Toast('没有更多啦！');
                            vm.$data.finished = true;
                            vm.$data.loading = false;
                        }
                    } else {
                        vant.Toast('系统开小差啦！');
                    }
                });
            }

        }
    });


</script>







{include file="common/foot-bottom" /}
